<template>
	<view class="content">
		<view class="padding-about-30 padding-top-30">
			<view class="background">
				<view class="padding-top-30 display-flex space-between 	">
					<view class="color-FFF display-flex flex-direction-column center align-items margin-left-40 ">
						<view class="font-size-22">
							卡库存（张）
						</view>
						<view class="font-size-36 font-weight-bold">
							{{info?.user.show_card_count.card_all}}
						</view>
					</view>
					<view v-if="local.get('userinfo').can_import  == 1" class="">
						<view @click="chooseFil" class="button margin-right-30">
							导入
						</view>

					</view>
				</view>
			</view>
			<view class="margin-top-30 view">
				<view class="font-size-30 font-weight-bold">
					卡列表
				</view>
				<view class="text-center" style="padding: 120rpx 0;" v-if="list.length == 0">
					暂无卡列表！
				</view>
				<view class="">
					<view v-for="item,index in list" :key="index" class="">
						<view class="font-size-26" style="padding:20rpx 0;">
							<view class="margin-top-10">
								卡编号: {{item.card_num}}
							</view>
							<view class="margin-top-10">
								导入时间: {{timestampToDate(item.createtime * 1000,'Y-m-d')}}
							</view>
							<view class="margin-top-10">
								状态: {{item.status == 0?'库存':item.status == 1?'开卡':item.status == 2?'占用':''}}
							</view>
							<!-- <view class="">
								<view class="font-size-26 file-1">
									{{item.msg}}
								</view>
								<view class="font-size-22 margin-top-10 color-999">
									
								</view>
							</view>
							<view style="color: #40AD35;" class="margin-right-10 font-size-26">
								
							</view> -->
						</view>
						<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
					</view>
				</view>
			</view>
			<div class="kong"></div>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法

	const info = ref({})
	//分页
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([])
	onLoad(function(option) {
		card_list()
	});
	onShow(function() {});
	async function chooseFil() {
		plus.io.chooseFile({
			title: '选择文件',
			filetypes: ['xlsx'],
			multiple: false,
		}, (e) => {
			uploadFilePromise('file://' + e.files[0])
		});
	}
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFilePromise(url)
		console.log(data)
		if (code == 1) {
			card_import(data.url)
		}
	}
	async function card_import(file) {
		const {
			code,
			data
		} = await api.card_import({
			file
		})
		if (code == 1) {
			nativeUI('导入成功！')
			navigateBack()
		}
	}
	async function card_list() {

		let object = {
			page: page.value,
			limit: 10
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.card_list(object)

			info.value = data
			list.value = list.value.concat(data.list.data)
			console.log(list.value);
			if (data.list.current_page == data.list.last_page) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		card_list()
	});
</script>

<style scoped lang="scss">
	.view {
		padding: 25rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.button {
		width: 122rpx;
		height: 42rpx;
		background: #F8F8F7;
		border-radius: 21rpx;
		border: 1px solid #C3DAFC;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		color: #2671CE;
	}

	.background {
		width: 690rpx;
		height: 182rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
		background: url('/static/ktjbg.png');
	}
</style>